<template>
  <el-drawer
    title="培训材料"
    size="500px"
    :close-on-click-modal="false"
    v-if="dialogVisible"
    direction="rtl"
    @close="handleCloseDialog"
    :visible="dialogVisible"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      style="width: 400px"
      label-width="140px"
    >
      <el-form-item label="培训材料名称" prop="name">
        <el-input type="text" v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="培训材料介绍" prop="description">
        <el-input type="textarea" v-model="ruleForm.description"></el-input>
      </el-form-item>
      <el-form-item label="培训文件" prop="storage_url">
        <UploadLink
          :limit="1"
          :onExceed="handleExceed"
          :files.sync="ruleForm.storage_url"
        ></UploadLink>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" style="text-align: center; padding-top: 20px">
      <el-button @click="handleCloseDialog">取 消</el-button>
      <el-button type="primary" @click="handleClickSubmit">确 定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import UploadLink from "@/components/uploadFile/uploadLink.vue";
import {
  trainingMaterialCreate,
  trainingMaterialUpdate,
  trainingMaterialDetail,
} from "@/api/qms.js";

export default {
  name: "trainMaterial",
  components: { UploadLink },
  props: ["dialogVisible", "mode", "id", "formData"],
  data() {
    return {
      ruleForm: {
        name: "",
        description: "",
        storage_url: [],
      },
      rules: {},
    };
  },
  mounted() {
    if (this.mode === "edit" || this.mode === "detail") {
      // this.getDetail();
      const data = {
        ...this.formData,
        storage_url: [
          {
            name: this.formData.storage_url,
            url: this.formData.storage_url,
          },
        ],
      };
      this.ruleForm = data;
      // console.log(this.ruleForm, '---------');
    }
  },
  methods: {
    handleCloseDialog() {
      this.$emit("close");
    },
    handleExceed(_, fileList) {
      this.$message.warning(`只能选择 ${fileList.length} 个文件上传`);
    },
    // getDetail() {
    //     trainingMaterialDetail({
    //         id: this.id
    //     }).then(res => {
    //         // console.log(res, 'eeeeee');
    //     });
    // },
    handleClickSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        let _ruleForm = {
          ...this.ruleForm,
          storage_url: this.ruleForm.storage_url[0].url,
        };
        if (this.mode === "add") {
          trainingMaterialCreate({
            material_list: [_ruleForm],
          }).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "新建成功",
                type: "success",
              });
              this.$emit("close", true);
            }
          });
        } else {
          trainingMaterialUpdate(_ruleForm).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.$emit("close", true);
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>